<template>
    <section>
        <div class="search-wrap f-pk f-fs14 f-bgw">
            <header class="f-dfc">
                <p class="iconfont icon-back" @click="$router.back(-1)"></p>
                <p class="search f-dfc">
                    <em class="iconfont icon-search f-ib"></em>
                    <input type="text" v-model="search" class="f-w90 f-bt" placeholder="请输入内容">
                </p>
                <p class="search-qual f-tac f-mp0 iconfont icon-triangle" @click="dialog">{{type===0?'游戏':'礼包'}}</p>
            </header>
            
        </div>
        <!--<chart-list :data="content"/>-->
        <ul class="list main" v-if="content">
            <li v-for="item in content" :key="item.index" class="f-dfc">
                <img :src="item.micon" class="bg">
                <router-link tag="div" :to="`/detail/${item.gameid}`" class="f-fx1">
                    <p>{{item.name}}</p>
                    <p class="f-fs12">{{item.adsize}}｜{{item.typename}}</p>
                    <p class="f-fs12 f-e85">首充{{item.ad_min_rate||item.ios_min_rate}}折</p>
                </router-link>
                <buttons :id="item.gameid"/>
            </li>
        </ul>
        <mt-popup position="bottom" class="f-w100 f-fs16" v-model="isPop">
            <p class="f-dfc" @click="searchType(0)">游戏<i :class="['iconfont f-fx1 f-tar',type===0?cls:'']"></i></p>
            <p class="f-dfc" @click="searchType(1)">礼包<i :class="['iconfont f-fx1 f-tar',type===1?cls:'']"></i></p>
        </mt-popup>
    </section>
</template>
<script>
//import ChartList from '@/components/ChartList'
function debounce(func, delay) {//节流函数
    let timer
    return (...args) => {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            func.apply(this, args)
        }, delay)
    }
}
export default {
    name:'search',
    data(){
        return{
            type:0,
            isPop:false,
            search:'',
            cls:'icon-ok',
            isGame:true,
            isGift:false,
            content:null
        }
    },
    methods: {
        dialog(){
            this.isPop=true
        },
        searchType(arg){
            this.type=arg;
            this.isPop=false;
            /*if(arg==0){
                this.isGame=true;
                this.isGift=false
                
            }else{
                this.type=1;
                this.isGame=false;
                this.isGift=true;
            }*/
            this.getDatas();
        },
        getDatas(val){
            const seaVal = val||this.search;
			seaVal.replace(/\s+/g,"");
            if(seaVal=='') return;
            this.$ajax.Search.main(this.type,seaVal).then(({data:{data:{gamelist,gamegiftlist}}})=>{
                if(gamelist&&gamelist.length!=0||gamegiftlist&&gamegiftlist.length!=0){
                    this.content=gamelist||gamegiftlist;
                }else{
                    this.content=[];
                    this.$toast({
                        message: '没有相关内容！',
                        position: 'bottom',
                        duration: 1500
                    });
                }
            })
        }
    },
	created(){
        this.$watch('search', debounce((val) => {
			this.getDatas(val);
        }, 200))
	},
    components:{
        //ChartList
    }
}
</script>
<style lang="less" scoped>
.mint-popup{
    min-height: 20%;
}
.search{
    margin: 20px 20px 20px 10px;
    padding: 10px;
    background: #F5f5f5;
    color: #999999;
    line-height: 2;
    flex:.95;
    border-radius: 6px;
}

.search em{
    margin:0 .3rem;
}
.mint-popup p{
    padding:2% 20%;
    line-height: 2;
}
.icon-ok:before{
    color:#FFC904;
}
</style>

